
import { Button, Cascader, Form, Input, InputNumber, Select } from 'antd';
import { useModel } from '@umijs/max'
import { addCityVip, addMoneyCardTemplateTemplate } from './services';
import { useRequest } from 'ahooks'
import UseRange from '../couponList/components/UseRange';
import { useEffect, useState } from 'react';
import { queryCityOptions2WithOutD } from '@/services/common';
import { GoodsCouponState } from '@/constants/enums/goods';
import dayjs from 'dayjs';
import { StationGround, StationInvoice, StationParkType, StationStatus } from '@/pages/station/stationList/services';

const MoneyCardTemplateEditPage: React.FC<RoutePageProps> = (props) => {
  const [editForm] = Form.useForm()
  const [cityName, setCityName] = useState<string>()
  const [infoId, setInfoId] = useState<number>()
  const [province, setProvince] = useState<string>()
  const [infoType, setInfoType] = useState<number>()
  const [editable, setEditable] = useState(false)
  const [cityId, setCityId] = useState<string>()
  const cityOptions = useRequest(queryCityOptions2WithOutD)
  const { runAsync, loading } = useRequest(addCityVip, {manual: true})
  const { closeCurrentTab } = useModel('global')

  const onCityChange = (value: any, item: any) => {
    if (item.length) {
      setCityId(item[item.length - 1].value)
      setProvince(item[0].label);
      if (item.length === 2)
      {
        setCityName(item[1].label);
        setInfoType(3);
      } else {
        if (item[0].label === '000000') {
          setInfoType(2);
        } else {
          setInfoType(1);
        }

      }
    }
  }

  useEffect(() => {

    const _dataStr = sessionStorage.getItem('logisticsNNTemplateData')
    if (_dataStr) {
      const _data = JSON.parse(_dataStr)
      editForm.setFieldsValue({
        dayType: _data.dayType,
        payMoney: _data.payMoney
      })
      setInfoId(_data.id)
      setCityId(_data.cityId)
      setProvince(_data.province)
      setCityName(_data.city)
      setInfoType(_data.infoType)
      setEditable(false)
      const cascaderValue = [`${_data.cityId.substring(0, 2)}0000`, `${_data.cityId.substring(0, 4)}00`]
      editForm.setFieldsValue({
        cascader: cascaderValue,
      })
      sessionStorage.removeItem('logisticsNNTemplateData')
    } else {
      setEditable(true)
    }
  }, [])

  const onFinish = (formValues: any) => {
    runAsync({
      id:infoId,
      cityId: cityId,
      province: province,
      state: 1,
      city: cityName,
      dayType:formValues.dayType,
      infoType:infoType,
      payMoney:formValues.payMoney,
    })
    .then(() => {
      const event = new CustomEvent('refreshMoney1CardTemplateList')
      window.dispatchEvent(event)
      closeCurrentTab('/coupon/cityVipList')
    })
  }
  
  return (
    <div className='container'>
      <div className="card">
        <Form form={editForm} name='editForm' labelCol={{flex: '120px'}} onFinish={onFinish}>
          <Form.Item name='cascader' label='省份城市' rules={[{required: true, message: '请选择省份城市'}]}>
            <Cascader
              loading={cityOptions.loading}
              options={cityOptions.data?.data}
              style={{width: 320}}
              disabled={!editable}
              placeholder='请选择'
              changeOnSelect
              onChange={onCityChange}
            />
          </Form.Item>
          <Form.Item name='dayType' label='请选择期限类型' required>
            <Select placeholder='请选择'  style={{width: 320}} options={[
              {label: '月', value: 1},
              {label: '季度', value:2},
              {label: '年', value:3}
            ]} allowClear />
          </Form.Item>
          <Form.Item name='payMoney' label='价格' rules={[{required: true, message: `请输入价格`}]}>
            <InputNumber placeholder="请输入" style={{width: 320}} precision={4} min={0.0001} />
          </Form.Item>

          <Form.Item label=' ' colon={false}>
            <Button type='primary' htmlType='submit' loading={loading}>提交</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default MoneyCardTemplateEditPage;
